import { Select, Space, Table, Button, Input, Form, message, Modal } from 'antd';
import React, { useState, useEffect } from 'react';
import {
  allBorker, searchBro, resetPass, addBro, getTheBro, editBro
} from '@/utils/hsyHttp/hsyhttp.jsx'
import { useNavigate } from "react-router-dom"
import '../PersonalUser/index.scss';
import { ExclamationCircleFilled } from "@ant-design/icons";

// 头部
import PageName from '../../../../components/PageName/index.jsx';

// 时间转换
import { parseTime } from '../../../../utils/date.jsx';

const { confirm } = Modal;
const App = () => {
  //路由跳转
  const navigate = useNavigate()

  // const [editId, setEditId] = useState(1)
  const [messageApi, contextHolder] = message.useMessage();
  //表单
  const [form] = Form.useForm();
  const formRef = React.useRef(null);
  //分页
  const [total, setTotal] = useState(1)
  // 页数
  const [currentPage, setCurrentPage] = useState(1)

  // 页面改变
  const onChange = (page) => {
    setCurrentPage(page.current);
  }

  // //打开模态框
  // const [open, setOpen] = useState(false);

  //表格数据
  const [data, setData] = useState([])
  useEffect(() => {
    getAgentData()
  }, [])
  //获取数据
  const getAgentData = () => {
    allBorker().then((res) => {
      let tableData = res.data
      setData(tableData)
      setTotal(tableData.length)
    })
  }

  //添加
  const addAgent = () => {
    navigate('/home/AddAgent')
  }

  //编辑
  const EidAgent = (b_id) => {
    console.log('编辑', b_id);
    navigate('/home/EditAgent', { state: { b_id } })
  }

  //搜索
  const searchAgentData = (params) => {
    console.log(params);
    if (params.b_state == '全部') {
      params.b_state = ''
    }
    searchBro(params).then(res => {
      let tableData = res.data
      setData(tableData)
      setTotal(tableData.length)
      message.success(res.msg)
    })
  };

  //清空
  const onReset = () => {
    formRef.current?.resetFields();
    getAgentData()
    message.success('清空成功')
  };



  // 显示成功信息
  const success = (content) => {
    messageApi.open({
      type: "success",
      content,
    });
  };

  //模态框
  const showDeleteConfirm = (title, Aid) => {
    confirm({
      title,
      icon: <ExclamationCircleFilled />,
      content: "",
      okText: "确认",
      okType: "danger",
      cancelText: "取消",
      onOk() {
        resetPass({ b_id: Aid }).then((res) => {
          success(res.msg);
        });
      },
    });
  };
  const columns = [
    {
      title: '编号',
      dataIndex: 'b_id',
      key: 'b_id',
      render: (text, record, index) => index + (currentPage - 1) * 5 + 1
    },
    {
      title: '照片',
      dataIndex: 'b_img',
      key: 'b_img',
      render: (_, { b_img }) => {
        return (
          <img src={'/api' + b_img} style={{ height: '50px' }}></img>
        )
      }
    },
    {
      title: '姓名',
      dataIndex: 'b_name',
      key: 'b_name',
    },
    {
      title: '手机号',
      dataIndex: 'b_phone',
      key: 'b_phone',
    },
    {
      title: '审核状态',
      key: 'b_state',
      dataIndex: 'b_state',
    },
    {
      title: '经纪公司',
      dataIndex: 'b_corporation',
      key: 'b_corporation',
    },
    {
      title: '最后登录时间',
      dataIndex: 'b_logintime',
      key: 'b_logintime',
      render: (_, { b_logintime }) => {
        if (b_logintime != '' && b_logintime != null) {
          return parseTime(b_logintime, '{y}-{m}-{d} {h}:{i}:{s}')
        } else {
          return b_logintime
        }

      }
    },
    {
      title: '注册时间',
      dataIndex: 'b_registortime',
      key: 'b_registortime',
      render: (_, { b_registortime }) => {
        if (b_registortime != '' && b_registortime != null) {
          return parseTime(b_registortime, '{y}-{m}-{d} {h}:{i}:{s}')
        } else {
          return b_registortime
        }

      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => EidAgent(record.b_id)}>编辑</a>
          <a onClick={() => {
            showDeleteConfirm("你确定重置密码吗?", record.b_id);
          }}>重置密码</a>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <PageName name="经纪人" />
      <Form
        className='headerForm'
        colon={false}
        form={form}
        layout='inline'
        ref={formRef}
        onFinish={searchAgentData}
        initialValues={{
          b_state: "全部",
          b_name: ''
        }}>
        <Form.Item label="审核状态" name="b_state">
          <Select
            defaultValue="全部"
            style={{
              width: 120,
            }}
            allowClear
            options={[
              {
                value: '未审核',
                label: '未审核',
              },
              {
                value: '审核通过',
                label: '审核通过',
              },
              {
                value: '全部',
                label: '全部',
              },
              {
                value: '审核未通过',
                label: '审核未通过',
              },
            ]}
          />
        </Form.Item>
        <Form.Item name="b_name" label="经纪人">
          <Input />
        </Form.Item>
        <Form.Item className='btn'>
          <Button type="primary" htmlType="submit" >搜索</Button>
          <Button tmlType="button" onClick={onReset}>清空</Button>
        </Form.Item>

      </Form>
      <Button type="primary" className='add' onClick={() => addAgent()}>添加</Button>

      <Table className={"table"} columns={columns} dataSource={data} rowKey={record => record.b_id}
        pagination={{
          defaultCurrent: 1, total, defaultPageSize: 5, hideOnSinglePage: true
        }} current={currentPage} onChange={onChange} />
    </div>


  );

}

export default App;